﻿@model SearchBoxModel
@using Nop.Web.Models.Catalog;
@using (Html.BeginRouteForm("ProductSearch", FormMethod.Get, new { onsubmit = "return check_small_search_form()" }))
{
    <input type="text" class="search-box-text" id="small-searchterms" @(Model.AutoCompleteEnabled ? Html.Raw(" autocomplete=\"off\"") : null)
                value="@T("Search.SearchBox.Tooltip")" name="q"  onfocus="if(this.value=='@T("Search.SearchBox.Tooltip")')this.value=''" onblur="if(this.value=='') {this.value = '@T("Search.SearchBox.Tooltip")';}" />
    <input type="submit" class="search-box-button" value="" />
    <script type="text/javascript">

        function check_small_search_form() {
            var search_terms = $("#small-searchterms");
            if (search_terms.val() == "") {
                alert('@Html.Raw(HttpUtility.JavaScriptStringEncode(T("Search.EnterSearchTerms").Text))');
                search_terms.focus();
                return false;
            }

            return true;
        }
            @if (Model.AutoCompleteEnabled)
            {
                <text>
                $(function () {
                    $('#small-searchterms').autocomplete({
                        delay: 500,
                        minLength: @(Model.SearchTermMinimumLength.ToString()),
                        source: '@(Url.RouteUrl("ProductSearchAutoComplete"))',
                        select: function( event, ui ) {
                            $("#small-searchterms").val(ui.item.label);
                            setLocation(ui.item.producturl);
                            return false;
                        }
                    })
                            .data("ui-autocomplete")._renderItem = function( ul, item ) {
                                var t = item.label;
                                //html encode
                                t = htmlEncode(t);
                                return $("<li></li>")
                                .data("item.autocomplete", item)
                                .append("<a>@(Model.ShowProductImagesInSearchAutoComplete ? Html.Raw("<img src='\" + item.productpictureurl + \"'>") : null)" + t + "</a>")
                            .appendTo(ul);
                            };
                });
                </text>
            }

        $(function () {
            $('#small-searchterms').focus(function () {
                $('#small-searchterms').css('border', '1px solid #F89406');
                $('#small-searchterms').css('box-shadow', '0px 0px 8px rgba(248, 148, 6, 0.6)');
                $('.search-box-button').css('background-color', '#F89406');
                $('.search-box-button').css('border', '1px solid #F89406');
                $('.search-box-button').css('box-shadow', '0px 0px 8px rgba(248, 148, 6, 0.6)');
            });

            $('#small-searchterms').blur(function () {
                $('#small-searchterms').css('border', '1px solid #eee');
                $('#small-searchterms').css('box-shadow', 'none');
                $('.search-box-button').css('background-color', '#eee');
                $('.search-box-button').css('border', '1px solid #eee');
                $('.search-box-button').css('box-shadow', 'none');
            });
        });
    </script>
    @Html.Widget("searchbox")
}